<template>
	<div>
		<div class="publish-top">
			<div class="left-icon" @click="handleBack"> 
				<img src="../../assets/images/right2.png"/>
			</div>
		</div>
		<div class="login-content">
			<h1>用户登录</h1>
			<ul class="login-list">
				<li>
					<img src="../../assets/images/home/user.png"/>
					<input type="number"  placeholder="用户手机号" @change="changePhone"/>
					<p>{{this.text}}</p>
				</li>
				<li>
					<img src="../../assets/images/home/password.png"/>
					<input type="password" placeholder="输入密码" @change="changePassword"/>
				</li>
			</ul>
			<div class="login" @click="handleLogin">登录</div>
			<div class="register" @click="handleRegister">注册</div>
			<div class="flooter">
				<div class="tap" @click="loginAuth('qq')">
					<img src="../../assets/images/home/qq2x.png"/>
					<p>QQ登录</p>
				</div>
				<div class="tap" @click="loginAuth('weixin')">
					<img src="../../assets/images/home/wechat2x.png"/>
					<p>微信登录</p>
				</div>
				<div class="tap" @click="handleForget">
					<img src="../../assets/images/home/password2X.png"/>
					<p>忘记密码</p>
				</div>
			</div>
		</div>
		<div class="login-opcit" v-if="chackShera">
			<div class="opaciy-con"></div>
			<div class="register-content">
				<div class="clone-con" @click="onCloseShera">X</div>
				<h1>请绑定手机号</h1>
				<ul class=" login-list">
					<li>
						<img src="../../assets/images/home/user.png"/>
						<input type="text" placeholder="用户手机号" @change="changePhoneS"/>
					</li>
					<li>
						<img src="../../assets/images/home/out.png"/>
						<input type="text" placeholder="输入验证码" @change="changeOut"/>
						<p @click="handleOut">{{getAuthCodeText}}</p>
					</li>
					<li>
						<img src="../../assets/images/home/password.png"/>
						<input type="password" placeholder="设置密码(6-18位)" @change="changePass"/>
					</li>
					<li>
						<img src="../../assets/images/home/password.png"/>
						<input type="password" placeholder="重复密码" @change="changePass2"/>
					</li>
				</ul>
				<button class="shareBtn" @click="shareBtn">确定</button>
			</div>
		</div>
	</div>
</template>

<script>
	
	import axios from "axios";
	import qs from 'qs';
	import user from '../../utils/isLogin';
	var auths = null;
	export default{
		data(){
			return{
				phone:'',
				password :'',
				text:'',
				isClick:true,
				phone2: '',
				code:'',
				password1:'',
				password2 :'',
				getAuthCodeText:'获取验证码',
				isDisabled: true,
				chackShera:false,
				dataObjck:null
			}
		},
		created(){
			
			let plusReady = ()=>{
				plus.oauth.getServices( function(services){
					auths = services;
				}, function(e){
//					alert( "获取分享服务列表失败："+e.message+" - "+e.code );
				} );
			}
			if (window.plus) {
		      plusReady();
		    } else {
		      document.addEventListener("plusready", plusReady, false);
		    }
		},
		components:{
			
		},
		methods:{
			onCloseShera(){
				this.chackShera = false;
				for (var i in auths) {
               var s = auths[i];
               if (s.authResult) {
	               s.logout(function(e) {
	               	console.log('注销登录认证成功!')
	               }, function(e) {
	                  console.log("注销登录认证失败！");
	               });
	            }
            }
			},
			changePhoneS (e){
				this.phone2 = e.target.value;
			},
			changeOut (e){
				this.code = e.target.value;
			},
			handleOut(){
				if(this.isClick){
					this.isClick = false;
					let phone2 = this.phone2;
					let myreg=/^[1][3,4,5,7,8][0-9]{9}$/;  
					if(!myreg.test(phone2) || phone2 == ''){
						plus.nativeUI.toast('手机号格式错误,请重新输入~')
						return
					}
		        	var count = 60;
		        	let daoTime = setInterval(() => {
		            count--; 
	           		this.getAuthCodeText = count + '(s)';
	               this.isDisabled = false; 
		            if (count === 0) {
	                    this.getAuthCodeText = '获取验证码';
	                    this.isDisabled = true;
		               
		                window.clearInterval(daoTime);
		            }
		        	}, 1000);
					axios.post( user.src + '/index/user/get_register_verify' , {
						mobile : phone2
					})
					.then((res)=> {
						if(res.data.status = 200){
							this.isClick = true;
						}
					})
					.catch((error)=> {
					    console.log(error);
					});
				}
				
			},
			changePass (e){
				this.password1 = e.target.value;
			},
			changePass2 (e){
				this.password2 = e.target.value;
			},
			//确定按钮登录
			shareBtn(){
				let phone2 = this.phone2;
				let code = this.code;
				let pass1 = this.password1;
				let pass2 = this.password2;
				this.dataObjck.mobile = phone2;
				this.dataObjck.password = pass1;
				this.dataObjck.confirm_password = pass2;
				this.dataObjck.verify = code;

				let myreg=/^[1][3,4,5,7,8][0-9]{9}$/;  
				if(!myreg.test(phone2) || phone2 == ''){
					plus.nativeUI.toast('手机号格式错误,请重新输入~');
					return
				}
				if(code == ''){
					plus.nativeUI.toast('验证码不能为空~');
					return;
				};
				if(pass1 == '' || pass2 == ''){
					plus.nativeUI.toast('密码不能为空~');
					return;
				}
				if(pass1.length < 6){
					plus.nativeUI.toast('密码不能低于6位~');
					return;
				}				

				axios({
				   method: 'post',
				   url: user.src + '/index/user/authorized_to_login',
				   data:this.dataObjck
				})
				.then((res) => {
					console.log(JSON.stringify(res))
					if(res.data.status == 1092){
						plus.nativeUI.toast(res.data.mesg)
					}
					
					if(res.data.status == 200){
						var home = plus.webview.getWebviewById('home');
						plus.webview.close(home);
						var collect = plus.webview.getWebviewById('collect');
						plus.webview.close(collect);
						var message = plus.webview.getWebviewById('message');
						plus.webview.close(message);
						var mine = plus.webview.getWebviewById('mine');
						plus.webview.close(mine);
						
						this.chackShera = false;
						plus.nativeUI.showWaiting( "登录中..." );
						var userData = {
	                    userId: res.data.data
						}
						window.localStorage.setItem( 'userInfo', JSON.stringify( userData ) );
						plus.webview.getLaunchWebview().reload();
						setTimeout(()=>{
							plus.nativeUI.closeWaiting();
							var login = plus.webview.getWebviewById('login');
							plus.webview.close(login);
							plus.nativeUI.toast('登录成功');
						}, 2000);
					}
				})
				.catch((error)=> {
				    console.log(error);
				});
			},
			//授权登录
			loginAuth(type){
				var that = this;
				var s;
            for (var i = 0; i < auths.length; i++) {
               if (auths[i].id == type) {
                  s = auths[i];
                  break;
               }
            }
            if (!s.authResult) {
                s.login(function(event) {
                  console.log("登录认证成功！");
                  s.getUserInfo(function(e) {
                    	var josnStr = s.userInfo;
	                  var client_info = plus.push.getClientInfo();
							var system;
							if(plus.os.name == 'Android') {
								system = 2;
							} else {
								system = 1;
							}
	                  var data;
	                  if(type == 'qq'){
	                  	data = {
								   id:type,
		                  	himg:josnStr.figureurl_qq_2,
		                  	nickname:josnStr.nickname,
		                  	sex:josnStr.gender,
		                  	token:e.target.authResult.openid,
		                  	cid: client_info.clientid,
		                  	system:system,
		                  	device_token:client_info.token
								}
	                  }else{
	                  	data = {
								   id:type,
		                  	himg:josnStr.headimgurl,
		                  	nickname:josnStr.nickname,
		                  	sex:josnStr.sex,
		                  	token:josnStr.openid,
		                  	cid: client_info.clientid,
		                  	system:system,
		                  	device_token:client_info.token
								}
	                  }
	                 	that.dataObjck = data;
							
							axios({
							   method: 'post',
							   url: user.src + '/index/user/authorized_to_login',
							   data:data
							})
							.then((res) => {
								console.log(JSON.stringify(res))
								if(res.data.status == 2000){
									var home = plus.webview.getWebviewById('home');
									plus.webview.close(home)
									var collect = plus.webview.getWebviewById('collect');
									plus.webview.close(collect)
									var message = plus.webview.getWebviewById('message');
									plus.webview.close(message)
									var mine = plus.webview.getWebviewById('mine');
									plus.webview.close(mine)
									
									that.chackShera = false;
									plus.nativeUI.showWaiting( "登录中..." );
									var userData = {
				                    userId: res.data.data
									}
									window.localStorage.setItem( 'userInfo', JSON.stringify( userData ) );
									plus.webview.getLaunchWebview().reload();
									setTimeout(()=>{
										plus.nativeUI.closeWaiting();
										var login = plus.webview.getWebviewById('login');
										plus.webview.close(login);
										plus.nativeUI.toast('登录成功');
									}, 2000);
								}
								if(res.data.status == 1){
									that.chackShera = true;
								}
							})
							.catch((error)=> {
							    console.log(error);
							});			
	               }, function(e) {
//	                   alert("获取用户信息失败：" + e.message + " - " + e.code);
	               }); 
                }, function(e) {
                  console.log("登录认证失败！");
                });
            } else {
                console.log("已经登录认证！");
            }
		},
			handleBack(){
				var login = plus.webview.currentWebview();
				plus.webview.close(login);			
			},
			handleRegister (){
				if(this.isClick){
					this.isClick = false;
					var register = plus.webview.create('register.html','register',{},{});
					register.addEventListener("loaded", ()=> {
					    register.show('pop-in', 300);
					    this.isClick = true;
					    register = null;
					}, false);
				}
			},
			handleForget (){
				if(this.isClick){
					this.isClick = false;
					var forget = plus.webview.create('forget.html','forget',{},{});
					forget.addEventListener("loaded", ()=> {
					    forget.show('pop-in', 300);
					    this.isClick = true;
					    forget = null;
					}, false);
				}
			},
			changePhone (e){
				this.phone = e.target.value;
			},
			changePassword (e){
				this.password = e.target.value;
			},
			handleLogin (){
				let phone = this.phone;
				let myreg=/^[1][3,4,5,7,8][0-9]{9}$/;  
				if(!myreg.test(phone) || phone == ''){
					plus.nativeUI.toast('账号格式错误~')
					return;
				}
				let password = this.password;
				if(password < 6 || password == ''){
					plus.nativeUI.toast('密码不能少于六位~')
					return;
				}
            var client_info = plus.push.getClientInfo();
            var system;
				if(plus.os.name == 'Android') {
					system = 2;
				} else {
					system = 1;
				}
         	var data = qs.stringify({
					mobile: phone,
					password: password,
					cid:client_info.clientid,
					system:system,
					device_token:client_info.token
				})
				plus.nativeUI.showWaiting( "登录中..." );
				axios({
					method: 'post',
					url: user.src + '/index/user/user_login',
					data: data
				})
				.then((res)=> {
					if(res.data.status == 1021){
						plus.nativeUI.toast("您还没注册~");
						plus.nativeUI.closeWaiting();
						return;
					}
					if(res.data.status == 1054){
						plus.nativeUI.toast("该账户已禁用");
						plus.nativeUI.closeWaiting();
						return;
					}
					if(res.data.status == 1022){
						plus.nativeUI.toast("账号或密码错误~");
						plus.nativeUI.closeWaiting();
						return;
					}
					if(res.data.status == 200){
						//-----------------关闭原先页面-----------------------
						var home = plus.webview.getWebviewById('home');
						plus.webview.close(home)
						var collect = plus.webview.getWebviewById('collect');
						plus.webview.close(collect)
						var message = plus.webview.getWebviewById('message');
						plus.webview.close(message)
						var mine = plus.webview.getWebviewById('mine');
						plus.webview.close(mine)
						
						var userData = {
                     userId: res.data.data.user_id
						}
						window.localStorage.setItem('userInfo', JSON.stringify( userData ));
						plus.webview.getLaunchWebview().reload();
						setTimeout(function(){
							plus.nativeUI.closeWaiting();
							var login = plus.webview.getWebviewById('login');
							plus.webview.close(login);
							plus.nativeUI.toast('登录成功');
						}, 2000);
					}
				})
				.catch((error)=> {
				   
				});
			},
		}
	}
</script>

<style lang='less' scoped>

html,body{

		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		background: #fff;

	}

	*{
		margin: 0;
		padding: 0;
	}
	ul,li{
		list-style: none;
	}
	
	.publish-top{
		width: 100%;
		height: 60px;
		background: #fff;
		padding-top: 70px;
		display:flex;				
		.left-icon{
			width: 90px;
			
			img{
				width: 15px;
				height: 26px;
				margin-left: 31px;
			}
		}
		p{		
			width: 80%;
			color: #000;
			font-size: 28px;
			text-align: center;
		}
		span{
			display: block;
			width: 170px;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
	}
	.login-content{
	
		width: 100%;
		
		h1{
			padding-left: 70px;
			line-height: 205px;
			font-size: 45px;
			color: #333333;
		}
		ul{
			padding: 0 70px;
			margin-bottom: 70px;
			li{
				margin-bottom: 24px;
				padding: 20px 0;
				height: 86px;
				border-bottom: 1px solid #cccccc;
				display: flex;
				align-items: center;
				img{
					margin-right: 28px;
					width: 40px;
					height: 45px;
				}
				input{
					width: 100%;
					font-size: 28px;
					color: #999999;
					height: 86px;
					border: none;
					outline: none;
				}
			}
		}
		.login{
			margin: 0 auto 15px;
			width: 615px;
			height: 100px;
			line-height: 100px;
			font-size: 31px;
			font-weight: bold;
			color: #fff;
			background: #00a2ff;
			border-radius: 48px;
			text-align: center;
		}
		.register{
			margin-bottom: 122px;
			width: 100%;
			height: 60px;
			font-size: 31px;
			color: #333333;
			text-align: center;
		}
		.flooter{
			
			display: flex;
			justify-content: space-around;
			
			.tap{
				
				img{
					margin-bottom: 27px;
					display: block;
					width: 75px;
					height: 75px;
					
				}
				p{
					font-size: 22px;
					line-height: 22px;
					color: #666;
				}
			}
		}
	}
	.login-opcit{
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 300;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.opaciy-con{
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0.8;
	}
	.register-content{
		position: absolute;
		width: 600px;
		height: 700px;
		background: #FFFFFF;
		border-radius: 20px;
		.clone-con{
			position: absolute;
			right: 0px;
			top: 0px;
			width: 50px;
			height: 50px;
			color: #9b9a9a;
			text-align: center;
			line-height: 50px;
		}
		h1{
			padding-left: 40px;
			line-height: 100px;
			font-size: 40px;
			color: #333333;
		}
		ul{
			padding: 0 40px;
			li{
				position: relative;
				/*margin-bottom: 24px;*/
				padding: 10px 0;
				height: 86px;
				border-bottom: 1px solid #cccccc;
				overflow: hidden;
				display: flex;
				align-items: center;
				img{
					/*float: left;*/
					margin-right: 28px;
					width: 40px;
					height: 45px;
				}
				input{
					display: block;
					/*float: left;*/
					width: 100%;
					font-size: 26px;
					color: #999999;
					height: 90px;
					border: none;
					outline: none;
				}
				p{
					z-index: 1;
					position: absolute;
					top: center;
					right: 0;
					/*float: right;*/
					display: block;
					font-size: 24px;
					color: #4581c9;
					text-align: right;
				}
			}
		}
		.shareBtn{
			border: 0;
			margin-left: 120px;
			margin-top: 50px;
			width: 350px;
			height: 80px;
			line-height: 80px;
			font-size: 31px;
			font-weight: bold;
			color: #fff;
			background: #00a2ff;
			border-radius: 20px;
			text-align: center;
			outline: none;
		}
		
	}
</style>